<template>
  <!--商品售后-->
  <div v-if="editDialogVisible5">
   <el-row :gutter="30">
      <el-col :span="2.50">
       <span>售后类型：</span>
      </el-col>
       <el-col :span="5">
        <template>
          <el-radio v-model="radio" label="1">通用类型</el-radio>
          <el-radio v-model="radio" label="2">自定义类型</el-radio>
        </template>
      </el-col>
   </el-row>

    <el-row :gutter="30" v-show="this.radio==1">
      <el-col :span="2.5">
       <span>售后内容：</span>
      </el-col>
       <el-col :span="2.5">
           <el-upload  :action="imgUpload" :before-upload="beforeAvatarUpload" :on-success="handleSuccessCurrency"  v-model="currencyDataForm.pictureUrl" accept="image/gif, image/jpeg, image/jpg, image/png" >
          <el-button  size="mini" type="primary">上传图片</el-button>
       </el-upload>
       </el-col>
       <el-col :span="12.5">
         <span>支持上传4M及以下的jpg、jpeg、png、gif格式图片，图片尺寸最大不超过XXX*YYY</span>
      </el-col>
   </el-row>

   <el-row :gutter="30" v-show="this.radio==2">
      <el-col :span="2.5">
       <span>售后内容：</span>
      </el-col>
       <el-col :span="2.5">
           <el-upload multiple="true" :action="imgUpload" :before-upload="beforeAvatarUpload" :on-success="handleSuccessCustom"  v-model="customDataForm.pictureUrl" accept="image/gif, image/jpeg, image/jpg, image/png" >
          <el-button  size="mini" type="primary">上传图片</el-button>
       </el-upload>
       </el-col>
       <el-col :span="12.5">
         <span>支持上传4M及以下的jpg、jpeg、png、gif格式图片，图片尺寸最大不超过XXX*YYY</span>
      </el-col>
   </el-row>

  <el-row :gutter="30" v-show="this.radio==1">
    <el-col :span="30">
      <div ng-repeat="e in merchantProductPic" style="margin-left: 15px;margin-top: 20px;" v-for="(item ,i) in fileListCurrencyCopy" :key="i">
        <img  style="height: 300px;width: 300px;display: block" :src="item.url" />
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="30" v-show="this.radio==2">
    <el-col :span="30">
      <div ng-repeat="e in merchantProductPic" style="margin-left: 15px;margin-top: 20px;" v-for="(item ,i) in fileListCustomCopy" :key="i">
          <img  style="height: 300px;width: 300px;display: block" :src="item.url" />
      </div>
    </el-col>
  </el-row>

  <!--   <el-form>
      <el-form-item class="styleReplace3" prop="content">
        <quill-editor
          v-model="dataFormAfterSale.content"
          ref="myQuillEditor"
          style="height: 300px;"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top:80px">
      <el-button
        :size="size"
        type="primary"
        @click.native="submitFormAfterSale"
        :loading="editLoading"
      >{{ $t("action.submit") }}
      </el-button>
    </div> -->
  </div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format, formatDate } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    KtButton,
    CyTable,
    TableColumnFilterDialog,
    quillEditor
  },
  data() {
    return {
      imgUpload: this.utils.imgUploadUrl, //上传
      size: "small",
      editDialogVisible5: false,
      radio:'1',//单选框
      activeName: "first",
      fileListCurrency:[],//通用类型
      fileListCurrencyCopy:[],
      fileListCustom :[],//自定义类型
      fileListCustomCopy :[],
      editorOption: {},
      dataFormAfterSale: {
        content: "",
        id: ""
      },
      currencyDataForm: {//通用
        pictureUrl: ""
      },
      customDataForm: {//自定义
        pictureUrl: ""
      },
      editLoading: false,
      productId: 0
    };
  },
  mounted() {},
  methods: {
    init(param) {
      this.editDialogVisible5 = param.flag;
      this.productId = param.productId;
      if (param.flag) {
        this.queryProductAfterSale(param);
      }
    },
    //校验上传的文件的大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isLt2M;
    },
    // 商品描述图片上传
    handleSuccessCurrency: function(res, file) {
      this.fileListCurrency = [];
      let imgUrl = {};
      imgUrl.url = res.data.imgUrl;
      this.fileListCurrencyCopy.push(imgUrl);
    },
        // 商品描述图片上传
    handleSuccessCustom: function(res, file) {
      this.fileListCustom = [];
      let imgUrl = {};
      imgUrl.url = res.data.imgUrl;
      this.fileListCustomCopy.push(imgUrl);
    },
    queryProductAfterSale(param) {
      let this_ = this;
      this.utils.request.queryProductAfterSale(param, function(data) {
        if (data.data != null) {
          $.each(data.data, function(index, val) {
            this_.dataFormAfterSale = val;
          });
        }
      });
    },
    submitFormAfterSale: function() {
      let this_ = this;
      this.$confirm("确认提交吗？", "提示", {}).then(() => {
        let paramsForm = {};
        paramsForm.productId = this_.productId;
        paramsForm.content = this_.dataFormAfterSale.content;
        paramsForm.id = this_.dataFormAfterSale.id;
        this.utils.request.addOrUpdateProductAfterSale(paramsForm, function(
          res
        ) {
          if (res.code == "0000") {
            this_.dataFormAfterSale.id = res.data.id;
            this_.$message({ message: "操作成功", type: "success" });
          } else {
            this_.$message({

              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 5px;
}
.el-col {
  border-radius: 4px;
}
</style>
